<template>
  <popup v-model="currentValue">
    <view class="addresTitle">
      <text @click="currentValue = false">取消</text>
      <view>所在地区</view>
      <text @click="onConfirm">确定</text>
    </view>
    <z-address :dataList="addressVal" @change="addressChange" :length="length" :force="force"></z-address>
  </popup>
</template>

<script>
import Popup from "./popup.vue";
import zAddress from "./address.vue";
export default {
  components: {
    Popup,
    zAddress
  },
  props: {
    dataList: {
      type: Array,
      default() {
        return [];
      }
    },
    value: {
      type: Boolean,
      default: false
    },
    length: {
      type: Number,
      default: 2
    },
    force: {
      type: Boolean,
      default: true
    }
  },
  created() {
    if (typeof this.value !== "undefined") {
      this.currentValue = this.value;
    }
    if (this.dataList instanceof Array) {
      this.addressVal = this.dataList;
    }
  },
  watch: {
    value(val) {
      this.currentValue = val;
    },
    currentValue(val) {
      this.$emit(val ? "on-show" : "on-hide");
      this.$emit("input", val);
    },
    dataList(val) {
      this.addressVal = val;
    }
  },
  data() {
    return {
      currentValue: false,
      //选出的值
      addressVal: []
    };
  },
  methods: {
    addressChange(val) {
      console.log(val);
      this.addressVal = val;
    },
    onConfirm() {
      if (parseInt(this.length) <= this.addressVal.length) {
        this.currentValue = false;
        this.$emit("change", this.addressVal);
      } else {
        uni.showToast({
          title: "请选择",
          icon: "none"
        });
      }
    }
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
@import "@/style/mixin.scss";
.addresTitle {
  display: flex;
  justify-content: space-between;
  height: 88rpx;
  line-height: 88rpx;
  border-bottom: 2rpx solid #ebebeb;
  padding: 0 20rpx;
  background-color: #fff;
}
.addresTitle view {
  font-size: 32rpx;
}
.addresTitle text {
  width: 80rpx;
  flex-shrink: 0;
  text-align: center;
}
.addresTitle text {
  font-size: 28rpx;
  color: #999;
}
.addresTitle text:last-child {
  color: $themeColor;
}
</style>
